<template>
  <!-- 顶部设置栏 -->
  <div class="TopSettingsBar">
    <div class="container">
      <div class="inputBox">
        <el-input v-model="widthValue" @blur="handleBlur"></el-input>
      </div>

      <div class="operator">*</div>

      <div class="inputBox">
        <el-input v-model="heightValue" @blur="handleBlur"></el-input>
      </div>

      <div class="zoom">缩放:</div>

      <div class="inputBox">
        <el-input v-model="zoom" @blur="handleBlur"></el-input>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "TopSettingsBar",
  data() {
    return {
      widthValue: "375",
      heightValue: "667",
      zoom: "1",
    };
  },
  watch: {},
  methods: {
    handleBlur() {
      // this.$parent.$refs.box.style
      this.$parent.$refs.box.style.width = this.widthValue + "px";
      this.$parent.$refs.box.style.height = this.heightValue + "px";
      this.$parent.$refs.box.style.zoom = this.zoom;
      console.log(this.$parent.$refs.box.style.heigth);
    },
  },
};
</script>

<style lang="less" scoped>
.TopSettingsBar {
  .container {
    display: flex;
    align-items: center;
    justify-content: center;
    .zoom,
    .operator {
      margin: 0 10px;
    }
  }
}
</style>
